<template>
  <div>
    <UseBreadcrumb>
      <template>
        <el-breadcrumb-item
          v-for="item of ['商品管理', '商品列表']"
          :key="item"
          >{{ item }}</el-breadcrumb-item
        >
      </template>
    </UseBreadcrumb>
    <el-card class="box-card">
      <el-row>
        <el-col :span="8">
          <el-input placeholder="请输入内容" clearable @clear="getGoodsList" v-model="queryInfo.query">
            <el-button slot="append" icon="el-icon-search"
            @click="getGoodsList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary"
          class="add_bnt"
          @click="goAddGoods"
          >添加商品</el-button>
        </el-col>
      </el-row>
      <!-- 商品列表区域 -->
          <el-table
          stripe
          border
      :data="goodsList"
      >
      <el-table-column
        type="index"
        label="#"
        >
      </el-table-column>
      <el-table-column
        prop="goods_name"
        label="商品名称"
        >
      </el-table-column>
      <el-table-column
       width="80px"
        prop="goods_price"
        label="商品价格">
      </el-table-column>
       <el-table-column
       width="80px"
        prop="goods_weight"
        label="商品重量">
      </el-table-column>
      <el-table-column
        width="160px"
        prop="add_time"
        label="创建时间">
        <template slot-scope="scope">
          {{scope.row.add_time | dateFormat}}
        </template>
      </el-table-column>
      <el-table-column
        width="120px"
        label="操作">
        <template slot-scope="scope">
         <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
         <el-button type="danger"
         size="mini" icon="el-icon-delete"
         @click="removeGoods(scope.row.goods_id)"
         ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[10, 20, 30, 100]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" background="">
    </el-pagination>
    </el-card>
  </div>
</template>

<script>
import UseBreadcrumb from '@/common_components/UseBreadcrumb'
export default {
  data() {
    return {
      //获取商品列表数据请求参数
      queryInfo:{
        query:'',
        pagenum:1,
        pagesize:10,
      },
      //商品列表数据
      goodsList:[],
      //分页显示总条数
      total:100
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    //获取商品列表数据
    async getGoodsList() {
      let {data:{data:res,meta}} = await this.$api.getGoodsListData({params:this.queryInfo})
      if (meta.status !==200) return this.$message.error('获取商品列表数据失败')
      this.goodsList = res.goods
      this.total = res.total
    },
    //监听分页显示条数变化
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getGoodsList()
    },
    //监听分页当前页码变化
    handleCurrentChange(newNum){
      this.queryInfo.pagenum = newNum
      this.getGoodsList()
    },
    //点击按钮,跳转到添加商品页面
    goAddGoods() {
      this.$router.push('/goods/add')
    },
    //实现删除商品数据功能
    async removeGoods(id) {
      let res = await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(error=>error)
      if (res !== 'confirm') return this.$message.info('已取消删除')
      let {data:{_,meta}} = await this.$api.deleteGoodsData(id)
      if (meta.status !== 200) return this.$message.error('删除失败')
      this.getGoodsList()
      this.$message.success('删除成功')
    }
  },
  components: {
    UseBreadcrumb
  }
}
</script>

<style scoped lang="less">
.add_bnt {
  margin-left: 10px;
}
.el-table {
  margin-top: 10px;
}
</style>

